<section>
  <h4>Simple Mode</h4>
  <div style="margin-bottom: 40px">
    <d-pagination
      [total]="pager3.total"
      [(pageSize)]="pager3.pageSize"
      [totalItemText]="'Total'"
      [(pageIndex)]="pager3.pageIndex"
      [canViewTotal]="true"
      [canChangePageSize]="true"
      [lite]="true"
    >
    </d-pagination>
  </div>
  <h4>Super Simple Mode</h4>
  <div style="margin-bottom: 40px">
    <d-pagination
      [size]="'sm'"
      [total]="pager2.total"
      [(pageSize)]="pager2.pageSize"
      [showPageSelector]="false"
      [(pageIndex)]="pager2.pageIndex"
      [canChangePageSize]="true"
      [lite]="true"
    >
    </d-pagination>
  </div>
  <h4>[haveConfigMenu] = "true"</h4>
  <div>
    <d-pagination
      [size]="'sm'"
      [total]="pager1.total"
      [(pageSize)]="pager1.pageSize"
      [showPageSelector]="false"
      [(pageIndex)]="pager1.pageIndex"
      [canChangePageSize]="true"
      [lite]="true"
      [haveConfigMenu]="true"
    >
      <div class="pagination-config-item">
        <div class="config-item-title">show field</div>
        <div class="config-item-words">setting</div>
      </div>
      <div class="pagination-config-item">
        <div class="config-item-title">display method</div>
        <div style="padding-left: 10px; margin-top: 4px">
          <i class="icon-list-view"></i>
          <i class="icon-veIcon-briefcase"></i>
        </div>
      </div>
    </d-pagination>
  </div>
</section>
